<!-- 
批量图片插入
 -->
<template>
  <div class="insert-photo-arr" style="display:inline-block;">
    <div  @click="show=true">
      <slot>
        <button type="button" class="ivu-btn ivu-btn-ghost">
          <i class="ivu-icon ivu-icon-ios-cloud-upload-outline"></i>
        </button>
      </slot>
    </div>

    <div class="v-transfer-dom" v-show="show">
      <div class="ivu-modal-mask" ></div>
      <div class="ivu-modal-wrap " >
        <div class=" p-10">
          <div class="ivu-modal-content">
            <a class="ivu-modal-close" @click="show=false">
              <i class="ivu-icon ivu-icon-ios-close-empty"></i>
            </a> 
            <div class="ivu-modal-header">
              <div class="ivu-modal-header-inner">插入图片</div>
            </div>
            <div class="ivu-modal-body">
              
              <div class="insert-photo-title">
                <span class="insert-photo-title-info"> 
                  当前图片分类：{{returnClassify(classify)}}
                </span>
                <span class="insert-photo-title-info">
                  当前选中图片:{{imgurlArr.length}}张
                </span>
                <Button type="primary" @click="returnImgurlArr">插入选中图片</Button>
              </div>
              <div>
                <div class="classify-tree">
                  <el-tree v-show="showTree"
                    :data="imgClassifyData"
                    @node-click="nodeClick" class="left ">
                  </el-tree>
                  <div class="left" @click="showTree=!showTree">
                    <Icon :type="showTree?'chevron-left':'chevron-right'" :size="24" style="padding-left:1rem;padding-top:1rem;color:#0ca80d;" ></Icon>
                  </div>
                  <div class="clear"></div>
                </div>
                <Row type="flex" justify="start" align="middle" :gutter="16">
                  <Col :lg="4" :md="6" :xs="12" class='all-img-col'  >
                    <div class="attr-1-1 all-img-item" >
                      <UploadFiles :classify="classify"></UploadFiles>
                    </div>
                  </Col>
                  <template v-for="item,index in imgArrThisPage">

                    <Col :lg="4" :md="6" :xs="12" class='all-img-col'  >
                      <label >
                      <div style="">
                        <div class="attr-1-1 all-img-item border-gary" :style="{backgroundImage:`url(${item.imgurl}-400X400.jpg)`}"  >
                          <div class="all-img-title">
                            <p >
                               <input type="checkbox" v-model="imgurlArr" :value="item"/>
                              {{item.imgname}}
                            </p>
                          </div>
                        </div>
                      </div>
                      </label>
                    </Col>
                  </template>
                </Row>
                <Page 
                  :total="total"
                  :current.sync="current"
                  :page-size="pageSize"
                  :page-size-opts="pageSizeOpts"
                  @on-page-size-change="pageSizeChange"
                  show-sizer
                  show-total
                  show-elevator></Page>
              </div>

            </div>
            <div class="ivu-modal-footer">
              <div>
                <button type="button" class="ivu-btn ivu-btn-primary ivu-btn-large" @click="show=false">取消</button> 

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>



  </div>
</template>


<script>
import { Tree } from 'element-ui';
export default {
  name: 'InsertPhotoArr',
  components: {
    "el-tree":Tree,
  },
  props:{
  },
  data () {
    return {
      current:1,//当前页码
      pageSize:11,//每页条数
      percent:0,//上传进度条
      classify:0,//选中图片分类
      pageSizeOpts:[11,23,35,47],//每页条数切换的配置
      showTree:false,//是否显示分类
      imgurlArr:[],//选中图片数组
      show:false,//显示弹出框
    }
  },
  created(){
    
  },
  computed: {
    //图片分类
    imgClassify:function(){
      return this.$store.state.base.navArr.filter(function(item){
        return item.type == 'index/photo/index' && item.status > 0;
      });
    },
    //分类数据用于Tree
    imgClassifyData:function(){
      let arr=this.$store.state.base.imgClassifyArr;
      return this.$comFun.listToTree(arr,{
        idKey:'value'
      });
    },
    //显示的图片数组
    imgArr:function(){
      return this.$store.state.base.imgArr.filter((value)=>{
        if(this.classify>1){
          return value.classify == this.classify
        }
        return true;
      });
    },
    //显示当前的总条数
    total:function(){
      return this.imgArr.length;
    },
    imgArrThisPage:function(){
      if(this.total==0){
        return;
      }
      let  star=(this.current-1)*this.pageSize+1;
      let endPage=star+this.pageSize-1;
      let end=this.total>endPage?endPage:this.total;
      return this.imgArr.slice(star-1,end);//[star,end];
    },
  },
  methods: {    
    //切换每页条数
    pageSizeChange:function(pageSize){
      this.pageSize=pageSize;
    },
    //返回图片地址
    returnImg:function(imgurl){
      if(this.insert){
        this.$emit('returnimg',imgurl);
      }
    },
    //点击选择不同图片分类
    nodeClick:function(data){
      this.classify=data.id;
      this.showTree=false;
    },
    //根据ID返回图片分类
    returnClassify:function(id){
      let index = this.imgClassify.findIndex((item)=>{
        return item.id == id;
      });
      let obj=this.imgClassify[index]||{title:"没有分类"}
      return obj.title;
    },
    //返回
    returnImgurlArr:function(){
      if(this.imgurlArr.length>0){
        let arr=[...this.imgurlArr]
        this.show=false;
        this.$emit('returnimgarr',arr);
        this.imgurlArr=[];
      }
    },
  }

}
</script>
<style >
.insert-photo-arr{
  text-align: center;
}
.classify-tree{
  position: absolute;
  z-index: 2;
}
.classify-tree .el-tree{
  min-width: 120px;
  background: #f2f2f2;
  padding: 1rem;
}
.insert-photo-title{
  margin-bottom: 1.5rem;
}
.insert-photo-title-info{
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  font-size: 1.2rem;
}
</style>